@import '../../ui/base'

$input
  -webkit-appearance none
  outline none
  border none
  padding 0
  margin 0
  height 25px
  &[disabled]
    opacity .7
  &:focus
    outline none

$input-normal
  @extends $input
  padding-left 5px
  height 30px
  border 1px solid #e3e3e3

.root
  border 1px solid rgba(204, 204, 204, .3)
  width 100%
  transition-property box-shadow
  transition-duration .2s
  margin-top 30px
  position relative
  &:hover
    box-shadow 0 0 18px rgba(0,0,0,.1)

.objective-detail
  min-height 95px
  margin-top 60px

.objective-detail-loading
  background-color #fff

.objective-main
  display flex
  background-color #fff
  border-bottom 1px solid rgba(204,204,204,0.3)
  .content
    flex 1

.content
  // background-color #fff
  min-height 95px
  // border-bottom 1px solid rgba(204,204,204,0.3)
  padding 0 18px
  display flex
  align-items center
  justify-content space-between
  padding 22px 18px 
  > div
    width 100%
  .left-wrapper
    width 100%
    align-items flex-start

.objective-detail
  .content
    > div
      @extends $slide-in-left

.left-wrapper
  display flex
  align-items center

.top-wrapper
  display flex
  align-items flex-start
  justify-content space-between
  flex 1


.info
  margin-left 18px
  align-self center
  .link-wrapper
  .link-wrapper > span
    display inline-block
    position relative
  display flex
  flex-direction column
  justify-content space-between
  position relative
  padding-right 30px

.others
  display flex
  align-items center
  height 15px
  margin-top 12px
  > p
    color #8B919C
    font-size 12px
    line-height 1
  p > span
    letter-spacing 1px
    margin-left 5px
  p + p
    margin-left 15px
    display flex
    align-items center

.info .title
  color #555
  font-size 30px
  word-break break-all
  max-width 890px

 // list 
.info a.title
  font-size 18px
  color #333
  max-width 840px
  &:hover
    opacity 1
    text-decoration underline

.director-list
  display flex
  align-items flex-end
  margin-left 40px
  li
    a
      display inline-block
      vertical-align middle
      > span
        display flex
        background-color #ebf4fb
        border-radius 53px
        align-items center
        font-size 12px
        color #8b919c
        padding 2px 7px 2px 2px
        span
          margin-left 2px
          line-height 1
    & + li
      margin-left 10px

.add-keyresult
  height 50px
  align-items center
  display flex
  background-color #fff
  button
    border none
    margin-left 76px

.edit
  // position absolute
  // right 16px
  // top 25px
  padding 25px 16px 0
  box-sizing border-box
  display flex
  color #B1C3D6
  > div > span, > span
    margin-right 12px
    border 1px solid rgba(190, 206, 223, .3)
    border-radius 50%
    border-color rgba(65, 167, 254, .3)
    color #41A7FE
    &:hover
      transform initial
      background-color #41A7FE
      color #fff


/*
.root:not(.objective-detail) .key-result
  .kr-content
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
*/

.key-result
  width 100%
  position relative
  background-color #fff
  padding-bottom 14px
  padding-left 37px
  .floor1, .floor2
    width 100%
    display flex
    position relative
    align-items flex-start
    padding-left 37px
    box-sizing border-box
    padding-top 14px
  .floor2
    padding-top 0
    flex-direction column
    &>div
      padding-top 6px
  &:hover
    .kr-edit
      .update-kr-note-btn
        color #97AEC7
        border-color #97AEC7
        &:hover
          color #00a0f6
    background-color #F7F9FD
    .icon
      color $red
  .kr-content
    word-break break-all
    width 200px
  .icon
    color #d6d6d6
    margin-right 30px
  .deadline
    color #8B919C
    font-size 12px
    line-height 1
    margin-left 15px
    display flex
    margin-top 6px
    width 115px
    min-height 1px
    > span
      letter-spacing 1px
      margin-left 5px
      align-items center

.key-result-priority
  width 55px
  text-align right
  > span
    position relative
    background #ECF2FA
    font-size 12px
    padding 2px 6px 2px 13px
    color #8b919c
    &::before
      content ''
      width 6px
      height 6px
      border-radius 50%
      position absolute
      left 4px
      top 6px

&.key-result-priority-0
  > span
    &::before
      background-color #FF6388
&.key-result-priority-1
  > span
    &::before
      background-color #FE9E49
&.key-result-priority-2
  > span
    &::before
      background-color rgb(52, 144, 237)
&.key-result-priority-3
  > span
    &::before
      background-color #aab4c8

.kr-directors
  font-size 12px
  background-color #ECF2FA
  border-radius 20px
  padding 0 10px
  max-width 175px
  overflow hidden
  text-overflow ellipsis
  white-space nowrap
  display inline-block
  position absolute
  right 142px
  color rgb(139, 145, 156)
  top 17px
  a
    color rgb(139, 145, 156)
    &:hover
      opacity 1
      color #00a0f6

.kr-edit
  position absolute
  right 8px
  top 15px
  display flex
  align-items center
  height 65%
  > div
    margin-right 5px
    > div
      right -34px
  > div > span, span
    &:hover
      transform initial
  > span
    margin-top -1px
    padding 3px
    color #8fa6bf
    &:hover
      color #41A7FE
  > div > span
    &:hover
      color #41A7FE

.kr-progress
  margin-left 15px
  margin-top 8px
  align-items flex-start
  > span:last-child
    max-width 140px
    word-break break-all
    display inline-block
  &.kr-editable
    cursor pointer
    &:hover
      span:last-child
        color #00a0f6


.kr-progress-notAudit
  > span span
    background-color: #FE9E49

.kr-edit-menu
  width 88px
  height 84px
  background-color #fff
  right 0
  z-index 10
  box-shadow 0px 1px 6px rgba(0,0,0,.2)
  border-radius 3px
  color #7793B2
  font-size 12px
  padding 10px 0
  li
    padding-left 10px
    height 22px
    line-height 22px
    display flex
    align-items center
    cursor pointer
    &:hover
      color #41A7FE
    > span
      margin-left 8px

.edit-progress
  &.type-1
    width 211px
    &.edit-objective-progress
      > i
        right 50px
    > i
      right 28px
  color #777
  width 340px
  background-color #fff
  box-shadow 0px 1px 6px rgba(0,0,0,.2)
  z-index 10
  padding 15px
  border-radius 3px
  margin-top 10px
  right -22px
  > i
    background-repeat: no-repeat;
    width: 18px;
    height: 8px;
    position: absolute;
    top: -8px;
    right: 162px;
    background-size: 18px auto;
  > p
    display flex
    align-items center
    input
      @extends $input-normal
      width 60px
      height 20px
      margin-right 5px
  .actions
    display flex
    align-items center
    margin-top 13px
    > button
      width 54px
      height 22px
      font-size 12px
      & + button
        margin-left 10px

.edit-objective-progress
  right 0
  > i
    right 32px

.actions
  display flex
  margin-right 36px
  align-items center
  margin-top 9px

@-webkit-keyframes scale
  0% {
    transform scale(.7) translateX(0)
  }

  100% {
    transform scale(1) translateX(5px)
  }

.update-kr-note-btn
  width 70px
  height 20px
  border-color #C0CDDB
  color #C0CDDB
  font-size 12px
  padding 0
  margin-right 6px


.lock
  position: absolute;
  right: 9px;
  top: 8px
  cursor default
  > span
    position absolute
    display none
    font-size 12px
    background #000
    color #fff
    border-radius 3px
    padding 2px 8px
    left 100%
    margin-right -2px
    margin-left 8px
    top 50%
    margin-top -11.5px
    z-index 12
    @extends $slide-in-left
    &::before
      content ''
      position absolute
      width: 4px;
      height: 8px;
      border-right: solid 4px rgb(0,0,0)
      border-bottom: solid 4px transparent
      border-top: solid 4px transparent
      left: 0
      top: 6px
      margin-left -4px
  i
    color: #9ba6b3;
    font-size: 12px;
  &:hover
    > span
      display inline-block
    i
      color #000

// detail
.objective-detail
  .lock
    top 18px

.not-editable
  .key-result-wrapper
    background #fff
    padding-bottom 20px
    
.kr-log
  color #8fa6bf

.todoWrapper
  position relative

.closeTodo
  position absolute
  right 30px
  bottom 16px
  color #b1c3d6
  font-size 12px
  cursor pointer
  &::after
    content ''
    width: 0
    height: 0
    border-style: solid
    border-width: 0px 4px 4px 4px
    border-color: transparent transparent #b1c3d6 transparent
    position: absolute
    right 0px
    margin-right -11px
    top 6px

// 目标点赞
.objective-like
  position relative
  color #58b9ff
  margin-right 13px
  font-size 12px
  transition all .3s
  opacity 1
  width 34px
  height 34px
  .toolTip
    text-align center
    position absolute
    top -35px
    padding 4px 0
    line-height 19px
    width auto
    border-radius 2px
    background-color rgba(0, 0, 0, 0.75)
    color #fff
    width 40px
    left -4px
    display none
    // opacity 0
    // z-index 0
    // transform scale(0)
    // transition all .3s
    &::after
      content " "
      display block
      position absolute
      border 5px solid transparent
      border-top-color rgba(0, 0, 0, 0.75)
      top 27px
      left 15px
  &:hover
    cursor pointer
    .toolTip
      display block
  img 
    width 34px
    height 26px
    position: absolute
    opacity 0
    top 0
  .likehover-icon, .islikehover-icon
    height 34px
  p
    // transition all .3s
    position absolute
    z-index 3
    opacity 1
    width 100%
    text-align center
    bottom -6px

// 已点赞
.objective-islike
  .like-icon
    opacity 0
    z-index 1
  .islike-icon
    opacity 1
    z-index 2
  &:hover
    .islike-icon, p
      opacity 0
    .islikehover-icon
      opacity 1

// 未点赞
.objective-notlike
  &:hover
    .like-icon, p
      opacity 0
    .likehover-icon
      opacity 1
  .like-icon
    opacity 1
    z-index 2
  .islike-icon
    opacity 0
    z-index 1

// 结果点赞
.kr-like
  position relative
  margin-right -3px !important
  &:hover
    cursor pointer
  img 
    width 16px
    height 16px
    position absolute
    display none
  span
    margin-left 17px
    font-size 12px
    color #999
// 已点赞
.kr-islike
  .kr-islike-icon
    display block
// 未点赞
.kr-notlike
  .kr-like-icon
    display block

@import './style.objective-item.ie.styl'
